<template>
    <div class="tips-warpper" ref="wrapper" @mouseenter.stop.prevent="hover" @mouseleave.stop.prevent="unhover">
        <slot class="html"></slot>
        <div class="tip" :class="data.direction" ref="tip">{{ tip }}</div>
    </div>
</template>

<script>
import kit from '../../electron/helper/kit';

export default {
    name : 'tips',
    props: [
        'tip',
        'direction',
        'delay'
    ],
    mounted () {
        this.$refs.tip.style.top = this.data.initTop;
        this.data.direction      = this.direction ? this.direction.toLowerCase() : this.data.direction;
        this.data.delay          = this.delay ? kit.toInt(this.delay) : this.data.delay;
    },
    data () {
        return {
            hoverTimer: null,
            data      : {
                delay    : 500,
                direction: 'top',
                initTop  : '10000px'
            }
        };
    },
    methods: {
        /*清理定时器*/
        clearHoverTimer () {
            this.hoverTimer && clearTimeout(this.hoverTimer);
        },

        hover () {
            /*清理定时器*/
            this.clearHoverTimer();

            /*未设置提示*/
            if (!this.tip) return false;

            /*延迟显示*/
            this.hoverTimer = setTimeout(() => {
                if (!this.$refs.tip) {
                    this.clearHoverTimer();
                    return;
                }

                /*style属性*/
                let tipReStyle = this.$refs.tip.style;

                /*定位信息*/
                let wrapClient = this.$refs.wrapper.getBoundingClientRect();

                /*实时style*/
                let tipStyle  = window.getComputedStyle(this.$refs.tip);
                let wrapStyle = window.getComputedStyle(this.$refs.wrapper);

                /*按方向定位*/
                switch (this.data.direction) {
                    /*上*/
                    case 'top':
                        tipReStyle.left = (kit.toInt(wrapClient.left) + (kit.toInt(wrapStyle.width) / 2) - (kit.toInt(tipStyle.width) / 2)) + 'px';
                        tipReStyle.top  = (kit.toInt(wrapClient.top) - kit.toInt(tipStyle.height) - 8) + 'px';
                        break;

                    /*右*/
                    case 'right':
                        tipReStyle.left = (kit.toInt(wrapClient.right) + 8) + 'px';
                        tipReStyle.top  = (kit.toInt(wrapClient.top) + (kit.toInt(wrapStyle.height) / 2) - (kit.toInt(tipStyle.height) / 2)) + 'px';
                        break;

                    /*下*/
                    case 'bottom':
                        tipReStyle.left = (kit.toInt(wrapClient.left) + (kit.toInt(wrapStyle.width) / 2) - (kit.toInt(tipStyle.width) / 2)) + 'px';
                        tipReStyle.top  = (kit.toInt(wrapClient.top) + kit.toInt(wrapStyle.height) + 8) + 'px';
                        break;

                    /*左*/
                    case 'left':
                        tipReStyle.left = (kit.toInt(wrapClient.left) - kit.toInt(tipStyle.width) - 8) + 'px';
                        tipReStyle.top  = (kit.toInt(wrapClient.top) + (kit.toInt(wrapStyle.height) / 2) - (kit.toInt(tipStyle.height) / 2)) + 'px';
                        break;
                }
            }, this.data.delay);
        },
        unhover () {
            /*清理定时器*/
            this.clearHoverTimer();
            this.$refs.tip.style.top = this.data.initTop;
        }
    }
};
</script>

<style lang="less" scoped>
.tip {
    @bg                   : #555;
    @color                : #fff;
    position              : fixed;
    z-index               : 1000;
    background            : @bg;
    color                 : @color;
    left                  : 0;
    padding               : 7px 12px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    max-width             : 200px;
    font-size             : 12px;

    &:before {
        position : absolute;
        content  : "\20";
        z-index  : 100;
        width    : 0;
        height   : 0;
    }

    &.top:before {
        border-left  : 6px solid transparent;
        border-right : 6px solid transparent;
        border-top   : 6px solid @bg;
        left         : 50%;
        bottom       : -5px;
        margin-left  : -6px;
    }

    &.right:before {
        border-top    : 6px solid transparent;
        border-bottom : 6px solid transparent;
        border-right  : 6px solid @bg;
        top           : 50%;
        margin-top    : -6px;
        left          : -5px;
    }

    &.bottom:before {
        border-left   : 6px solid transparent;
        border-right  : 6px solid transparent;
        border-bottom : 6px solid @bg;
        left          : 50%;
        top           : -5px;
        margin-left   : -6px;
    }

    &.left:before {
        border-top    : 6px solid transparent;
        border-bottom : 6px solid transparent;
        border-left   : 6px solid @bg;
        top           : 50%;
        margin-top    : -6px;
        right         : -5px;
    }
}
</style>
